#top-bar
  background-color $bg-color
  padding 0
  font-size 1.5rem
  flex-direction row
  line-height $top-bar-height

  .navbar-brand
    background-color white
    display flex
    justify-content center
    align-items center
    width 16.5rem
    height $top-bar-height
    margin-right 0

  .navbar-nav
    flex-direction row

  .nav-item.active
    background-color $active-color

  .nav-link
    color white
    padding 0
    text-align center

    &:hover
      background-color $active-color

  i
    display none

  @media (min-width $sm-min-width)
    &
      .navbar-nav
        flex 1 1

      .nav-item
        flex 1 1 20%
        max-width 12.5rem

  @media (max-width $xs-max-width)
    &
      font-size 1rem
      line-height 1.5

      .mobile-bar
        background-color $bg-color
        display flex
        width 100%
        height $mobile-top-bar-height

      .qrcode-button
        background transparent
        border none
        width $mobile-top-bar-height
        height $mobile-top-bar-height

        .icon
          display block
          width 26px
          height 26px
          background url(../img/mobile-icon.png) no-repeat left top/cover

      .navbar-brand
        background-color transparent
        width 30%
        height 100%

        img
          height 28px

      .navbar-nav
        background-color $bg-color
        position fixed
        left 0
        right 0
        bottom 0
        flex-direction row

      .nav-item
        width 20%
        padding 0

      .nav-link
        padding .25rem 0
        width 100%

        i
          background url(../img/mobile-icon.png) no-repeat
          background-size 26px
          height 2rem
          display block

        .icon-homepage
          background-position 27px -27px

        .icon-portfolio
          background-position 30px -57px

        .icon-join-us
          background-position 27px -87px

        .icon-about
          background-position 25px -118px

        .icon-faq
          background-position 27px -148px